<template>
  <div>
    <Row class="list_row" style="margin-top: 0px;min-height: 400px;">
      <Row style="margin: 5px 0px 10px 0px;">
        <Date-picker format="yyyy-MM-dd" type="date" v-model="startQueryDate" placement="bottom-end"
        :placeholder="$t('common.startTimePlaceTips')" clearable style="width: 200px"
                     @on-change="startDateChange"></Date-picker>
        <span style="margin-left: 10px;margin-right: 10px;">-</span>
        <Date-picker format="yyyy-MM-dd" type="date" v-model="endQueryDate" placement="bottom-end"
        :placeholder="$t('common.endTimePlaceTips')" clearable style="width: 200px"
                     @on-change="endDateChange"></Date-picker>
        <Button type="primary" icon="ios-search" style="margin-left: 20px" @click="search">{{$t('search')}}</Button>
        <Button icon="md-refresh" style="margin-left: 20px" @click="reset">{{$t('reset')}}</Button>
        <Button type="warning" icon="ios-download" style="margin-left: 20px" :loading="exportLoading" @click="handleExport">{{$t('export')}}
                </Button></Button>
      </Row>
      <Table :columns="column" border :data="dataList" stripe :no-data-text="noDataMsg">
        <template slot-scope="{ row, index }" slot="seq">
          {{ (currentPage - 1) * pageSize + index + 1 }}
        </template>
        <template slot-scope="{ row }" slot="action">
          <Button type="warning" size="small" icon="ios-play"
                  @click="playVideo(row)" >{{$t('common.videoView')}}
          </Button>
          <Button type="info" size="small" style="margin-left: 15px" @click="showReport(row)">{{$t('common.evalateBtn')}}</Button>
        </template>
      </Table>
      <div class="div_page">
        <Page :total="totalCount" :current="currentPage" :page-size="pageSize"
              show-total show-elevator prev-text="<" next-text=">" @on-change="pageChg"/>
      </div>
    </Row>
  </div>
</template>
<script>
import FreeTrainApi from '@/api/freeTrainApi'

export default {
  data() {
    return {
      //导出按钮遮罩层
      exportLoading: false,
      trainerId: '',
      trainCenterId: '',
      saveLoading: false,
      searchKeyword: '',
      noDataMsg: this.$t('common.noData'),
      entityModelVisiable: false,
      entityForm: {
        id: '',
      },
      totalCount: 20,
      currentPage: 1,
      pageSize: 10,
      dataList: [],
      startQueryDate: '',
      endQueryDate: '',
      startQueryDateVal: '',
      endQueryDateVal: '',
      //做到这个tab页
      column: [
        {
          title: this.$t('common.seq'), 
          slot: "seq",
          width: '110',
        },
        {
          
          title: this.$t('common.trainActionName'), 
          key: 'trainActionName'
        },
        { 
          title:this.$t('common.heft') +'(kg)',
          key: 'weight'
        },
        {
          title: this.$t('common.sportStartColumn'), 
          key: 'startTrainTime'
        },
        {
          title: this.$t('common.sportEndColumn') , 
          key: 'endTrainTime'
        },
        {
          title: this.$t('common.optColumn') ,
          slot: 'action',
          width:300
        }]
    }
  },
  methods: {
    initData(curTrainCenterId, curTrainerId) {
      this.trainCenterId = curTrainCenterId
      this.trainerId = curTrainerId
      this.search()
    },
    search() {
      console.log("刷新自主运动数据")
      this.currentPage = 1
      this.fetchDataList()
    },
    fetchDataList() {
      this.noDataMsg = this.$t('common.loading') , 
      this.dataList = []
      var param = {'pageSize': this.pageSize, 'currentPage': this.currentPage}
      if (this.startQueryDateVal.length > 0) {
        param.startTrainTime = this.startQueryDateVal
      }
      if (this.endQueryDateVal.length > 0) {
        param.endTrainTime = this.endQueryDateVal
      }
      FreeTrainApi.pageResult(param, this.trainerId, this.trainCenterId).then(res => {
        this.dataList = res.data.data.pageResult.items
        this.totalCount = res.data.data.pageResult.totalCount
        this.noDataMsg =  this.$t('common.noData') 
      }, error => {
        this.$Message.error(error.response.data.msg);
      })
    },
    pageChg(selPage) {
      this.currentPage = selPage
      this.fetchDataList()
    },
    startDateChange(formatTime) {
      this.startQueryDateVal = formatTime
    },
    endDateChange(formatTime) {
      this.endQueryDateVal = formatTime
    },
    showReport(row) {
      const routeData = this.$router.resolve({
        name: "freeTrainReport",
        query: {sportsRecordId: row.id}
      });
      window.open(routeData.href, '_blank');
    },
    playVideo(row) {
      const routeData = this.$router.resolve({
        name: "video",
        query: {sportsRecordId: row.id}
      });
      window.open(routeData.href, '_blank');
    },
    //重置查询
    reset(){
      this.startQueryDate='';
      this.startQueryDateVal='';
      this.endQueryDate='';
      this.endQueryDateVal='';
      this.search();
    },
    /** 导出按钮操作 */
    handleExport() {
      //先刷新页面查询结果
      this.search();
      this.$Modal.confirm({
        title:  this.$t('common.exportPromt'),
        content: this.$t('common.exportQ')+"</br>"+this.$t('common.eq1')+"<span style='color:red'>"+ this.$t('common.eq2') +"</span>，"+ this.$t('common.eq3')+"<span style='color:red'>"+this.$t('common.eq4')+"</span>，" + this.$t('common.eq5') ,
        okText: this.$t('yes'),
        cancelText: this.$t('cancel'),
          onOk: () => {
          this.exportLoading = true;
          this.exportExcel().then(response => {
            var timestamp = new Date().toLocaleDateString();
            let blob = new Blob([response.data], {type: 'application/vnd.ms-excel;charset=utf-8'});
            let fileName =   this.$t('common.autosRecord') +timestamp;
            const link = document.createElement('a');
            link.download = fileName;
            link.style.display = 'none';
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click();
            URL.revokeObjectURL(link.href);
            document.body.removeChild(link);
            this.exportLoading = false;
            }).catch(() => { this.exportLoading = false;});
          }
        });
    },
    exportExcel(){
      var param = {
        'trainerId': this.trainerId,
        'trainCenterId': this.trainCenterId
      }
      if (this.startQueryDateVal.length > 0) {
        param.startQueryDate = this.startQueryDateVal
      }
      if (this.endQueryDateVal.length > 0) {
        param.endQueryDate = this.endQueryDateVal
      }
      return FreeTrainApi.exportFreeRecordExcel(param)
    },
  }
}
</script>
